<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础的get请求</title>
</head>
<body>
   <h1>
       hello world
   </h1>

   <form action="">
       <input type="text" name="" id="">
       <button>输入学生id 查询信息</button>
   </form>
   <script>
       const oFrom = document.querySelector('form')
       const oIpt = document.querySelector('input')
    //    绑定事件两种方法:
        // 给提交按钮绑定点击事件
        // 给表单绑定提交事件  from.onsubmit
       oFrom.onsubmit=function(e){
           //获取表单内容
           let userId = oIpt.value
        
        //创建XMLHttpRequest实例  
        const xhr =new XMLHttpRequest()

        xhr.open('GET',`/user/?userId=${userId}`)//页面部署在服务器上,不用写http://127.0.0.1:8090
        xhr.send()//发送请求
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&(xhr.status>=200&&xhr.status<=299)){
                const data =JSON.parse(xhr.responseText)
                console.log(data);
            }
        }
        // 阻止浏览器默认事件:e.preventDefalut()  或者 return false
        return false//阻止浏览器默认事件
       }
   </script>
</body>
</html>